<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{margin: 0;padding: 0;list-style:none;}
	div{
		width: 1080px;height: auto;
		margin: 0 auto;
	}
	ul{
		width: 220px;height: 380px;float: left;
		margin: 10px;padding: 10px;
	}
	li{
		width: 200px;height: 300px;
		border:1px solid #369;
		padding: 10px;text-align:center;
		margin-bottom: 50px;
	}
	h4{font-size:16px;margin-top: -20px;}
	</style>
</head>
<body>
	<div id="all">
		<li id="item" style="display:none">
			<img  width="100%" height="280px">
			<h4>商品名称</h4>
			<p>价格: <span>99.00</span></p>
		</li>
		<ul></ul>
		<ul></ul>
		<ul></ul>
		<ul></ul>
	</div>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
	var p = 1;
	var isLoading = false;

	requestgoods();

	function requestgoods()
	{
		$.get('1.php',{p:p},function(data){
			for (var i = 0; i < data.length; i++) {
				var newLi = $('#item').clone();

				newLi.find('img').attr('src',data[i].pic);
				newLi.find('h4').html(data[i].title);
				newLi.find('span').html(data[i].price);

				newLi.show();
				var index = i%4;

				$('ul').eq(index).append(newLi);
			}
			p++;
			isLoading = false;

		},'json');
	}

	$(window).scroll(function(){
		if(isLoading){return}
		var sh = $(document).height();
		var st = $(window).scrollTop();
		var ch = $(window).height();

		if(sh - st - ch <= 200)
		{
			requestgoods();

		}
	})
	</script>
</body>
</html>